<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>科幻电影小说整理</title>
	<link href="./css/common.css" rel="stylesheet" type="text/css">
	<link href="./css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="img-bg"></div>
	<div class="container">
		<div class="container-movies">
			<div class="movies-en" id="movies_en"></div>
			<div class="line-movies"></div>
			<div id="movies_ch"></div>
		</div>
		<div class="container-books">
			<div class="books-en" id="books_en"></div>
			<div class="line-books"></div>
			<div id="books_ch"></div>
		</div>
	</div>
	<script src="./js/jQuery-v3.4.0.js"></script>
	<script src='./js/menu.js'></script>
	<script>
		for (let i = 0; i < data.books.length; i++) {
			createBook(data.books[i]);
		}
		for (let i = 0; i < data.movies.length; i++) {
			createMovie(data.movies[i]);
		}
		function createBook(book) {
			let en_p = $("<p></p>").text(book.en);
			let ch_p = $("<p></p>").text(book.ch);
			if (book.url) {
				en_p.bind("click", function () {
					$(location).attr("href", book.url);
				})
				ch_p.bind("click", function () {
					$(location).attr("href", book.url);
				})
			} else {
				en_p.attr("style", "color: gray");
				ch_p.attr("style", "color: gray");
			}
			$("#books_en").append(en_p);
			$("#books_ch").append(ch_p);
		}

		function createMovie(movie) {

			let en_p = $("<p></p>").text(movie.en);
			let ch_p = $("<p></p>").text(movie.ch);
			if (movie.url) {
				en_p.bind("click", function () {
					$(location).attr("href", movie.url);
				})
				ch_p.bind("click", function () {
					$(location).attr("href", movie.url);
				})
			}
			if (movie.url && movie.sign) {
				en_p.attr("style", "color: #FFFF37");
				ch_p.attr("style", "color: #FFFF37");
			} else if (!movie.url && movie.sign) {
				en_p.attr("style", "color: #FFFF37;opacity: 0.4");
				ch_p.attr("style", "color: #FFFF37;opacity: 0.4");
			} else if (!movie.url && !movie.sign) {
				en_p.attr("style", "opacity: 0.4");
				ch_p.attr("style", "opacity: 0.4");
			}
			$("#movies_en").append(en_p);
			$("#movies_ch").append(ch_p);
		}
	</script>
</body>
</html>